// @import url(./basic.css);
@bgc: #f1fcfc66;

.init {
    opacity: 0 !important;
}

#wrap {
    position: relative;
    width: 80%;
    min-width: 960px;
    min-height: 460px;

    margin: .5rem auto;

    * {
        transition: all .8s;
    }


    // 初始动画
    &.init {
        margin-top: -15% !important;

        .option {
            margin-left: -20%;
            transition-delay: .3s;
        }

        #content {
            margin-top: 12%;
        }
    }

    .conf-wrap {
        padding: .2rem .5rem;
        box-sizing: border-box;

        border-radius: .5rem;
        box-shadow: .05rem .05rem .1rem #e1f6ff66;

        background: @bgc;
        //    webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);


        z-index: 1;
        transition: all .3s;

        // animation: wrap-shadow 10s infinite;

        &:hover {
            transition: all .5s;
            box-shadow: .1rem .1rem .4rem #91cae566;
            background: #ffffff99;
            backdrop-filter: blur(15px);
        }


        & {

            &,
            * {
                font-size: .7rem;
                vertical-align: middle;
                color: #408638;
            }

            button {
                cursor: pointer;
                color: #384a86;
                background: #c7f09d;
                box-shadow: 1px 1px .1rem #ccc;
                border: none;

                margin-left: 1em;
                padding: .2rem .4rem;
                border-radius: .2rem;

                user-select: none;
                transition: all .2s;

                &:hover {
                    background: #80c966;
                    color: #524bd0;
                }

                &[disabled] {
                    cursor: not-allowed;
                    color: #55a2be;
                    background: #a1d9e0;
                }
            }

            select {
                cursor: pointer;
                position: relative;
                border-bottom: 1px solid #387f86;
                outline: none;
                margin-left: 1em;
                padding: .1rem .3rem;
                box-sizing: border-box;
                background: #ffffffee;


                &:after {
                    content: "\25BC";
                    position: absolute;
                    top: 12px;
                    right: 10px;
                    background: #000;
                }

                &,
                * {
                    min-width: 2rem;
                    border: none;
                }

            }

            option {
                // background: #none;
                background: #c2f5d566;

                &:hover {
                    background: #86a9e5;
                    color: #000 !important;
                }
            }

            input {
                position: relative;
                outline: none;
                border: none;
                border-bottom: .1rem solid #80b14f;

                margin: 0 1em;

                /* &::after {
                content: 'nbsp';
                // position: absolute;
                // width: 30%;
                // height: 100%;
                width: 100px;
                height: 100px;
                right: 0;
                background: @bgc;
                background: #000;
                z-index: 1;
            } */


                &::selection {
                    color: #387f86;
                    background: #c7f1e6;
                }


                &[disabled] {
                    cursor: not-allowed;
                    color: #68b8d5;
                    background: #defcea;
                }
            }
        }

        .line {
            display: flex;
            align-items: center;
            margin-bottom: .5rem;

            input[type=file] {
                display: none;
            }

            .option {
                span:first-child {
                    &::selection {
                        color: #bd6649;
                        background: #f1efc7;
                    }
                }
            }
        }
    }
}

#processBar {
    position: relative;
    width: 90%;
    height: 1rem;
    left: 5%;
    background: #b4d8f8;
    border-radius: 2rem;
    overflow: hidden;

    font-size: .7rem;
    color: #4f9da9;

    .current {
        text-indent: 2em;
        background: #8f98e766;
        height: 100%;
        width: 30%;
    }
}


#content {
    position: relative;
    width: 100%;
    min-height: 10rem;
    background: #ffffff66;

    margin-top: .5rem;

    border-radius: .3rem;

    backdrop-filter: blur(24px);
    box-shadow: 1px 1px .1rem #eee;


    z-index: 10;
    transition: all .3s;

    &:hover {
        transition: all .6s;
        box-shadow: 1px 1px .5rem #ccc;
    }

    .question-text {
        display: flex;
    }

    box-sizing: border-box;
    padding: .1em 1rem;

    li {
        font-size: .6rem;
        margin-left: 2em;
        // list-style-type: decimal-leading-zero;
        list-style-type: none;

        p {
            margin-left: .5em;
        }
    }
}

#pageBtn {
    position: relative;
    width: 100%;
    margin-top: .5rem;
    z-index: 11;

    .optioin {
        display: flex;
        justify-content: center;
        align-items: center;
        // text-align: center;
        margin: 0 auto;
        vertical-align: middle;
    }

    * {
        outline: none;
        border: none;
        font-size: .6rem;
    }

    input,
    button {
        // box-shadow: 1px 1px .01rem #ccc;
        padding: .1rem .3rem;
        color: #384a86;
    }

    input {
        border-bottom: .05rem solid #ddd;
        width: 6rem;
        text-align: center;
    }

    button {
        cursor: pointer;
        margin: 0 .5em;
        background: #a4b6f16b;

        &:active {
            background: #4e6ac4cc;
        }
    }
}

// 临时
#temp {
    // display: none;
    opacity: 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

@keyframes wrap-shadow {
    0% {
        box-shadow: .1rem .1rem .4rem #91cae5;
    }

    20% {
        box-shadow: 0 .1rem .4rem #91cae5;
    }

    40% {
        box-shadow: -.1rem 0 .4rem #91cae5;
    }

    60% {
        box-shadow: 0 -.1rem .4rem #91cae5;
    }

    80% {
        box-shadow: .1rem 0 .4rem #91cae5;
    }

    100% {
        box-shadow: .1rem .1rem .4rem #91cae5;
    }
}


@media screen and (max-width: 1000px) {
    #wrap {
        width: 100%;
    }
}